<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head xmlns:th="http://www.thymeleaf.org" th:include="master::head">
    <title>页面抽取规则配置</title>

</head>
<body>
<div class="container">
    <div class="row">
        <!--<div class="col-md-4">-->
        <!--</div>-->
        <div class="col-md-12">
            <h4><font color="red">字段名中请不要包含".",否则将会导致数据保存失败</font></h4>
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <!--<button id="btn_edit" type="button" class="btn btn-default">-->
                <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改-->
                <!--</button>-->
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="tb_page"></table>
        </div>


    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="divModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;height:auto;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="modalLabel">
                    </h4>
                </div>
                <div class="modal-body">
                    <iframe src="" style="width:100%;height:460px;border: none">
                    </iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <!--<button id="btnSiteSubmit" type="button" class="btn btn-primary">-->
                    <!--保存-->
                    <!--</button>-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" id="resultModal" tabindex="-1" role="dialog"
         aria-labelledby="resultModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;height:auto;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="resultModalLabel">测试结果展示
                    </h4>
                </div>
                <div class="modal-body">
                    <textarea id="ta_result" style="width: 100%;" rows="20"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div th:include="master::itemDel"></div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
                $('#divModal').on('hidden.bs.modal', function () {
                    $('#tb_page').bootstrapTable('refresh');
                });
                $("#btn_add").click(function () {
                    $("#modalLabel").html("添加待抽取Page");
                    $('#divModal iframe').attr("src", "addPageInfo");
                    $('#divModal').modal({
                        keyboard: false
                    });
                });
                $("#btn_delete").click(function () {
                    delItem(function () {
                        var selectedRows = $('#tb_page').bootstrapTable('getSelections');
                        var selectedIds = [];
                        $.each(selectedRows, function (i, item) {
                            selectedIds.push(item.id);
                        });
                        if (selectedIds.length == 0) return false;

                        $.ajax({
                            type: "Post",
                            cache: false,
                            contentType: "application/json",
                            url: global.contextPath + "/deletePageInfoByIds",
                            data: JSON.stringify(selectedIds),
                            dataType: 'json',
                            success: function (result) {     //回调函数，result，返回值
                                if (result == true)
                                    $('#tb_page').bootstrapTable('refresh');
                                else
                                    alert("删除失败");
                            },
                            error: function (msg) {
                                alert(JSON.stringify(msg));
                            }
                        });
                    });
                });

                //1.初始化Table
                var TableInit = function () {
                    var oTableInit = new Object();
                    //初始化Table
                    oTableInit.Init = function () {
                        $('#tb_page').bootstrapTable($.extend(global.bootstrapTableOptions, {
                                    url: global.contextPath + '/queryPageInfos',
                                    pageSize: 1,                       //每页的记录行数（*）
                                    pageList: [2, 4, 8, 10],        //可供选择的每页的行数（*）
                                    escape: true,
                                    columns: [{
                                        checkbox: true
                                    }, {
                                        field: 'pageUrl',
                                        title: '页面Url',
                                        editable: {
                                            type: 'text',
                                            validate: function (value) {
                                                if ($.trim(value) == '') {
                                                    return '页面Url不能为空';
                                                }
                                            }
                                        }
                                    }, {
                                        field: 'urlRgx',
                                        title: 'Url匹配正则表达式',
                                        editable: {
                                            type: 'text',
                                            validate: function (value) {
                                                if ($.trim(value) == '') {
                                                    return '表达式值不能为空';
                                                }
                                            }
                                        }
                                    },
                                        {
                                            field: 'isJsRendering',
                                            title: '是否JS渲染',
                                            editable: {
                                                type: 'select',
                                                source: [
                                                    {value: "0", text: '否'},
                                                    {value: "1", text: '是'}
                                                ]
                                            }
                                        },
                                        {
                                            field: 'method',
                                            title: '请求方式',
                                            editable: {
                                                type: 'select',
                                                source: [
                                                    {value: 'GET', text: 'GET'},
                                                    {value: 'POST', text: 'POST'}
                                                ],
                                                validate: function (value) {
                                                    if ($.trim(value) == '') {
                                                        return '测量值不能为空';
                                                    }
                                                }
                                            }
                                        }, {
                                            field: 'paramsJson',
                                            title: '请求参数',
                                            editable: {
                                                type: 'textarea'
                                            },
//                                            formatter: function (value, row, index) {
//                                                return value;
//                                            }
                                        },{
                                            field: 'pageValidationRule',
                                            title: '页面验证规则',
                                            editable: {
                                                type: 'textarea'
                                            },
//                                            formatter: function (value, row, index) {
//                                                return value;
//                                            }
                                        },
                                        {
                                            field: 'action',
                                            title: '操作',
                                            formatter: function (value, row, index) {
                                                return [
                                                    '<a  href="javascript:void(0)" class="addRegion btn btn-sm green" title="加解析区域">',
                                                    '<i class="fa fa-plus">加解析区域</i>',
                                                    '</a>',
                                                    '<a  href="javascript:void(0)" class="testExpression btn btn-sm purple" title="测试表达式">',
                                                    '<i class="fa fa-file-o">测试表达式</i>',
                                                    '</a>'
                                                ].join('');
                                            },
                                            events: {
                                                'click .addRegion': function (e, value, row, index) {
                                                    $("#modalLabel").html("添加页面解析区域");
                                                    $('#divModal iframe').attr("src", "addPageRegion?pageId=" + row.id + "&random=" + Math.random());
                                                    $('#divModal').modal({
                                                        keyboard: false
                                                    });
                                                },
                                                'click .testExpression': function (e, value, row, index) {
                                                    $("#modalLabel").html("测试此页面有关的表达式语法");
                                                    $('#divModal iframe').attr("src", "pageExpressionTest?pageId=" + row.id + "&random=" + Math.random());
                                                    $('#divModal').modal({
                                                        keyboard: false
                                                    });
                                                }
                                            }
                                        }
                                    ],
                                    //注册加载子表的事件。注意下这里的三个参数！
                                    onExpandRow: function (index, row, $detail) {
                                        var regionData = row.pageParseRegions;
                                        if (!regionData || regionData.length == 0) return false;

                                        var cur_table = $detail.html('<table id="region_' + row.id + '"></table>').find('table');
                                        $(cur_table).bootstrapTable({
                                            clickToSelect: false,
                                            undefinedText: "",
                                            escape: true,
                                            detailView: true,//父子表
                                            data: regionData,
                                            uniqueId: "id",
                                            pagination: false,
                                            striped: true,
                                            search: false,
                                            columns: [{
                                                checkbox: false
                                            }, {
                                                field: 'name',
                                                title: '区域名称',
                                                editable: {
                                                    type: 'text',
                                                    validate: function (value) {
                                                        if ($.trim(value) == '') {
                                                            return '区域名称不能为空';
                                                        }
                                                    }
                                                }
                                            },
                                                {
                                                    field: 'selectExpression',
                                                    title: '区域选择表达式',
                                                    editable: {
                                                        type: 'text',
                                                        validate: function (value) {
                                                            if ($.trim(value) == '') {
                                                                return '区域选择表达式不能为空';
                                                            }
                                                        }
                                                    }
                                                },
                                                {
                                                    field: 'dataType',
                                                    title: '数据类型',
                                                    editable: {
                                                        type: 'select',
                                                        source: [
                                                            {value: 'MAP', text: '属性数据'},
                                                            {value: 'IMAGE', text: '图片下载'},
                                                            {value: 'DOCUMENT', text: '文档下载'}
                                                        ],
                                                        validate: function (value) {
                                                            if ($.trim(value) == '') {
                                                                return '数据类型不能为空';
                                                            }
                                                        }
                                                    }
                                                },
                                                {
                                                    field: 'action',
                                                    title: '操作',
                                                    formatter: function (value, row, index) {
                                                        return [
                                                            '<a  href="javascript:void(0)" class="testRegion btn btn-sm purple" title=" 测试此区域">',
                                                            '<i class="fa fa-file-o">测试区域</i>',
                                                            '</a>',
                                                            '<a  href="javascript:void(0)" class="deleteRegion btn btn-sm red" title=" 删除此区域">',
                                                            '<i class="fa fa-times">删除区域</i>',
                                                            '</a>',
                                                            '<a  href="javascript:void(0)" class="addFieldRule btn btn-sm yellow" title="添加字段规则">',
                                                            '<i class="fa fa-plus">字段规则</i>',
                                                            '</a>',
                                                            '<a  href="javascript:void(0)" class="addUrlRule btn btn-sm blue" title="添加Url规则">',
                                                            '<i class="fa fa-plus">子链规则</i>',
                                                            '</a>'

                                                        ].join('');
                                                    },
                                                    events: {
                                                        'click .addFieldRule': function (e, value, row, index) {
                                                            $("#modalLabel").html("添加区域解析字段规则");
                                                            $('#divModal iframe').attr("src", "addFieldRule?regionId=" + row.id + "&random=" + Math.random());
                                                            $('#divModal').modal({
                                                                keyboard: false
                                                            });
                                                        },
                                                        'click .addUrlRule': function (e, value, row, index) {
                                                            $("#modalLabel").html("添加区域解析Url规则");
                                                            $('#divModal iframe').attr("src", "addUrlRule?regionId=" + row.id + "&random=" + Math.random());
                                                            $('#divModal').modal({
                                                                keyboard: false
                                                            });
                                                        },
                                                        'click .testRegion': function (e, value, row, index) {
                                                            var data = row;
                                                            $.ajax({
                                                                type: "post",
                                                                cache: false,
                                                                contentType: "application/json",
                                                                url: global.contextPath + "/testPageRegionRule",
                                                                data: JSON.stringify(data),
                                                                dataType: 'json',
                                                                success: function (result) {     //回调函数，result，返回值
                                                                    debugger
                                                                    $("#resultModal #ta_result").val(JSON.stringify(result, null, "\t"));
                                                                    $('#resultModal').modal({keyboard: false});
                                                                },
                                                                error: function (msg) {
                                                                    alert("测试出现异常！");
                                                                    console.log(msg);
                                                                }
                                                            });
                                                        },
                                                        'click .deleteRegion': function (e, value, row, index) {
                                                            delItem(function () {
                                                                var selectedIds = [];
                                                                selectedIds.push(row.id);
                                                                $.ajax({
                                                                    type: "Post",
                                                                    cache: false,
                                                                    contentType: "application/json",
                                                                    url: global.contextPath + "/deletePageRegionByIds",
                                                                    data: JSON.stringify(selectedIds),
                                                                    dataType: 'json',
                                                                    success: function (result) {     //回调函数，result，返回值
                                                                        if (result == true)
                                                                            $('#tb_page').bootstrapTable('refresh');
                                                                        else
                                                                            alert("删除失败");
                                                                    },
                                                                    error: function (msg) {
                                                                        alert(JSON.stringify(msg));
                                                                    }
                                                                });
                                                            });

                                                        }
                                                    }
                                                }
                                            ],
                                            onEditableSave: function (field, row, oldValue, $el) {
                                                $.ajax({
                                                    type: "post",
                                                    contentType: "application/json",
                                                    dataType: "json",
                                                    url: global.contextPath + "/savePageRegion",
                                                    data: JSON.stringify(row),
                                                    success: function (data, status) {
                                                        if (status == "success") {
                                                        }
                                                    },
                                                    error: function () {
                                                        alert("保存失败！");
                                                    }
                                                });
                                            },
                                            //无线循环取子表，直到子表里面没有记录
                                            onExpandRow: function (index, row, $Subdetail) {
                                                var fieldRules = row.fieldParseRules;
                                                var urlRules = row.urlParseRules;
                                                var ruleData = fieldRules.concat(urlRules);
                                                if (!ruleData || ruleData.length == 0) return false;

                                                var rule_table = $Subdetail.html('<table class="ruleTable"></table>').find('table');
                                                $(rule_table).bootstrapTable({
                                                    clickToSelect: false,
                                                    undefinedText: "",
                                                    escape: true,
                                                    detailView: true,//父子表
                                                    data: ruleData,
                                                    uniqueId: "id",
                                                    pagination: false,
                                                    striped: true,
                                                    search: false,
                                                    onExpandRow: function (index, row, $detail) {
                                                        //urlParam表格
                                                        var urlParamList = row.urlRuleParams;
                                                        if (!urlParamList || urlParamList.length == 0) return false;
                                                        var cur_table = $detail.html('<table ></table>').find('table');
                                                        $(cur_table).bootstrapTable({
                                                            clickToSelect: false,
                                                            undefinedText: "",
                                                            escape: true,
                                                            detailView: false,//父子表
                                                            data: urlParamList,
                                                            uniqueId: "id",
                                                            pagination: false,
                                                            striped: true,
                                                            search: false,
//                                                            onPostBody: function () {$("a.detail-icon").click();},
                                                            columns: [{
                                                                field: 'paramName',
                                                                title: '参数名',
                                                            },
                                                                {
                                                                    field: 'expression',
                                                                    title: '参数抽取表达式',
                                                                },
                                                                {
                                                                    field: 'action',
                                                                    title: '操作',
                                                                    formatter: function (value, row, index) {
                                                                        return [
                                                                            '<a  href="javascript:void(0)" class="testRuleParam btn btn-sm purple" title="测试规则">',
                                                                            '<i class="fa fa-file-o">测试</i>',
                                                                            '</a>',
                                                                            '<a  href="javascript:void(0)" class="deleteRuleParam btn btn-sm red" title="删除规则">',
                                                                            '<i class="fa fa-times">删除</i>',
                                                                            '</a>'
                                                                        ].join('');
                                                                    },
                                                                    events: {
                                                                        'click .testRuleParam': function (e, value, row, index) {
                                                                            var data = row;
                                                                            $.ajax({
                                                                                type: "post",
                                                                                cache: false,
                                                                                contentType: "application/json",
                                                                                url: global.contextPath + "/testUrlRuleParam",
                                                                                data: JSON.stringify(data),
                                                                                dataType: 'json',
                                                                                success: function (result) {     //回调函数，result，返回值
                                                                                    $("#resultModal #ta_result").html(JSON.stringify(result, null, "\t"));
                                                                                    $('#resultModal').modal({keyboard: false});
                                                                                },
                                                                                error: function (msg) {
                                                                                    alert("测试出现异常！");
                                                                                    console.log(msg);
                                                                                }
                                                                            });
                                                                        },
                                                                        'click .deleteRuleParam': function (e, value, row, index) {
                                                                            delItem(function () {
                                                                                var selectedIds = [];
                                                                                selectedIds.push(row.id);
                                                                                var targetUrl = global.contextPath;
                                                                                targetUrl += "/deleteUrlRuleParamByIds";
                                                                                $.ajax({
                                                                                    type: "Post",
                                                                                    cache: false,
                                                                                    contentType: "application/json",
                                                                                    url: targetUrl,
                                                                                    data: JSON.stringify(selectedIds),
                                                                                    dataType: 'json',
                                                                                    success: function (result) {     //回调函数，result，返回值
                                                                                        if (result == true)
                                                                                            alert("删除成功");
                                                                                        else
                                                                                            alert("删除失败");
                                                                                    },
                                                                                    error: function (msg) {
                                                                                        alert(JSON.stringify(msg));
                                                                                    }
                                                                                });
                                                                            });
                                                                        }
                                                                    }
                                                                }
                                                            ]
                                                        });
                                                    },
                                                    columns: [{
                                                        checkbox: false
                                                    }, {
                                                        field: 'rule',
                                                        title: '规则内容',
                                                        editable: {
                                                            type: 'text',
                                                            validate: function (value) {
                                                                if ($.trim(value) == '') {
                                                                    return '规则内容不能为空';
                                                                }
                                                            }
                                                        }
                                                    },
                                                        {
                                                            field: 'fieldName',
                                                            title: '字段名称',
                                                            editable: {
                                                                type: 'text',
                                                                validate: function (value) {
                                                                    if ($.trim(value) == '') {
                                                                        return '字段名称不能为空';
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            field: 'remark',
                                                            title: '备注',
                                                            editable: {
                                                                type: 'text'
                                                            }
                                                        },
                                                        {
                                                            field: 'action',
                                                            title: '操作',
                                                            formatter: function (value, row, index) {
                                                                var items= [
                                                                    '<a  href="javascript:void(0)" class="testRule btn btn-sm purple" title="测试规则">',
                                                                    '<i class="fa fa-file-o">测试</i>',
                                                                    '</a>',
                                                                    '<a  href="javascript:void(0)" class="deleteRule btn btn-sm red" title="删除规则">',
                                                                    '<i class="fa fa-times">删除</i>',
                                                                    '</a>'
                                                                ];
                                                                if(!row.fieldName)
                                                                    items.push( '<a  href="javascript:void(0)" class="addUrlParam btn btn-sm yellow" title="添加请求参数">'+
                                                                            '<i class="fa fa-plus">参数</i>'+
                                                                            '</a>');
                                                                return items.join('');
                                                            },
                                                            events: {
                                                                'click .addUrlParam': function (e, value, row, index) {
                                                                    $("#modalLabel").html("添加请求参数");
                                                                    $('#divModal iframe').attr("src", "addUrlRuleParam?urlRuleId=" + row.id + "&random=" + Math.random());
                                                                    $('#divModal').modal({
                                                                        keyboard: false
                                                                    });
                                                                },
                                                                'click .testRule': function (e, value, row, index) {
                                                                    var data = row;
                                                                    if (row.fieldName != null) data.ruleType = "fieldRule";
                                                                    else data.ruleType = "urlRule";
                                                                    $.ajax({
                                                                        type: "post",
                                                                        cache: false,
                                                                        contentType: "application/json",
                                                                        url: global.contextPath + "/testPageWithRule?scope=" + data.ruleType,
                                                                        data: JSON.stringify(data),
                                                                        dataType: 'json',
                                                                        success: function (result) {     //回调函数，result，返回值
                                                                            $("#resultModal #ta_result").html(JSON.stringify(result, null, "\t"));
                                                                            $('#resultModal').modal({keyboard: false});
                                                                        },
                                                                        error: function (msg) {
                                                                            alert("测试出现异常！");
                                                                            console.log(msg);
                                                                        }
                                                                    });
                                                                },
                                                                'click .deleteRule': function (e, value, row, index) {
                                                                    delItem(function () {
                                                                        var selectedIds = [];
                                                                        selectedIds.push(row.id);
                                                                        var targetUrl = global.contextPath;
                                                                        if (row.fieldName != null)
                                                                            targetUrl += "/deleteFieldRuleByIds";
                                                                        else   targetUrl += "/deleteUrlRuleByIds";
                                                                        $.ajax({
                                                                            type: "Post",
                                                                            cache: false,
                                                                            contentType: "application/json",
                                                                            url: targetUrl,
                                                                            data: JSON.stringify(selectedIds),
                                                                            dataType: 'json',
                                                                            success: function (result) {     //回调函数，result，返回值
                                                                                if (result == true)
                                                                                    $('#tb_page').bootstrapTable('refresh');
                                                                                else
                                                                                    alert("删除失败");
                                                                            },
                                                                            error: function (msg) {
                                                                                alert(JSON.stringify(msg));
                                                                            }
                                                                        });
                                                                    });
                                                                }
                                                            }
                                                        }
                                                    ],
                                                    onEditableSave: function (field, row, oldValue, $el) {
                                                        var targetUrl = global.contextPath;
                                                        if (row.fieldName != null) targetUrl += "/saveFieldRule";
                                                        else targetUrl += "/saveUrlRule";
                                                        $.ajax({
                                                            type: "post",
                                                            contentType: "application/json",
                                                            dataType: "json",
                                                            url: targetUrl,
                                                            data: JSON.stringify(row),
                                                            success: function (data, status) {
                                                                if (status == "success") {
                                                                }
                                                            },
                                                            error: function () {
                                                                alert("保存失败！");
                                                            }
                                                        });
                                                    },
                                                });
                                            }
                                        });
                                    },
                                    onEditableSave: function (field, row, oldValue, $el) {
                                        $.ajax({
                                            type: "post",
                                            contentType: "application/json",
                                            dataType: "json",
                                            url: global.contextPath + "/savePageInfo",
                                            data: JSON.stringify(row),
                                            success: function (data, status) {
                                                if (status == "success") {
                                                }
                                            },
                                            error: function () {
                                                alert("保存失败！");
                                            }
                                        });
                                    },
                                    onPostBody: function () {
                                        $("a.detail-icon").click();
                                        $(".detail-view a.detail-icon").click();
                                    }
                                }
                        ));
                    };
                    return oTableInit;
                };
                var oTable = new TableInit();
                oTable.Init();
            }
    );
    /*]]>*/
</script>

</body>
</html>